<template>
    <div style="margin-top: 75px;margin-bottom: 75px">
        <h3>今年的车型销售趋势</h3>
        <div id="thisYear" style="width: 100%;height:400px; margin-top: 75px;"></div>
        <h3>查看其他年份</h3>
        <el-date-picker style="font-size: large" v-model="year" type="year" @change="showOther=true;setChart('otherYear')"></el-date-picker>
        <div id="otherYear" style="width: 100%;height:400px; margin-top: 75px;" v-show="showOther"></div>
    </div>
</template>

<script>
    let carSaleTrend = {
        props: ['brand'],
        data() {
            return {
                year: '',
                carSaleTrendLegends: [],
                showOther: false,
            }
        },
        mounted() {
            this.setChart('thisYear');
        },
        methods: {
            setChart(id) {
                if (typeof this.year == 'string') {//如果是个 String类型，使用 new Date 进行初始化
                    this.year = new Date();
                }
                this.year=String(this.year.getFullYear());
                console.log(this.year);
                this.$http({
                    url: this.$http.adornUrl(this.$route.meta['url']),
                    method: 'get',
                    params: this.$http.adornParams({
                            'year': (this.year),
                        },
                    ),
                }).then(form => {
                    if (form.data.status == "0") {
                        let data = form.data;
                        let thisYear = this.$echarts.init(document.getElementById(id));
                        // 指定图表的配置项和数据
                        let datum = data['series'];
                        console.log(datum);
                        datum=datum.filter(e=>e.name==this.brand)//获取名字一致的列表
                        console.log(datum);
                        let option = {
                            "title": {"text": this.brand+"销量走势（单位：辆）"},
                            "tooltip": {},
                            "series": datum,
                            "xAxis": {"data": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]},
                            "yAxis": {},
                        };
                        let legendData = datum.map(e => e.name);
                        thisYear.setOption(option);
                        window.addEventListener('resize', function () {
                            thisYear.resize()
                        });
                    } else {
                        this.$message("数据有误，请等待管理员处理")
                    }
                });
            },
        },
        beforeRouteUpdate(to, from, next) {
            if (to.fullPath != from.fullPath) {
                next();
                this.setChart('thisYear')//代替 mounted进行初始化
                this.showOther=false//其他年份的图表进行隐藏
            }
        },
    }
    export default carSaleTrend
</script>

<style scoped>

</style>